<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">生产计划编辑</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100">
            <el-button
                class="btn-success width100"
                type="primary"
                @click="submitForm(1)"
            >保存</el-button>
        </el-col>
        <el-col class="mr20 width100">
            <el-button
                class="btn-success width100"
                type="primary"
                @click="submitForm(2)"
            >提交</el-button>
        </el-col>
        <el-col :span="10" class="status-container">
            <div class="status-item">
              <span :class="{ 'active' : this.form.plunStatus == 3 }">草稿</span>
              <span :class="{ 'active' : this.form.approveStatus == 0 }">待审核</span>
              <span :class="{ 'active' : this.form.approveStatus == 1 }">已审核</span>
              <span :class="{ 'active' : this.form.approveStatus == 2 }">反审核</span>
              <span :class="{ 'active' : this.form.approveStatus == 3 }">拒绝</span>
            </div>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="mt30">
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划编码:" prop="planCode">
              <el-input v-model="form.planCode" placeholder="系统自动生成" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品名称:" prop="productBasicName">
              <el-input v-model="form.productBasicName" placeholder="请选择产品" @focus="productShow" clearable @clear="productClear" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="规格名称:" prop="productName">
              <el-input v-model="form.productName" placeholder="请选择" @focus="productNameShow" clearable @clear="productNameClear" :disabled="form.productBasicName == ''" />
              <!-- <el-select v-model="form.productName" style="width:100%;" placeholder="请选择" :disabled="form.productBasicName == ''" @change="onProductName">
                <el-option
                  v-for="item in productNameList"
                  :key="item.productSpecificationsId"
                  :label="item.specificationName"
                  :value="item.productSpecificationsId">
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
             <el-form-item label="规格:" prop="specification">
              <el-input v-model="form.specification" placeholder="请输入产品规格" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品批号:" prop="batchNumber">
              <el-input v-model="form.batchNumber" placeholder="请输入产品批号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="箱规:" prop="productSpace">
              <el-input v-model="form.productSpace" placeholder="请输入箱规" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品注册证号:" prop="registrationNumber">
              <el-input v-model="form.registrationNumber" placeholder="请输入产品注册证号" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产序列号:" prop="productionSerialNumber">
              <el-input v-model="form.productionSerialNumber" placeholder="请输入生产序列号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划生产数量:" prop="planNum">
              <el-input v-model="form.planNum" placeholder="请输入计划数量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划开始日期:" prop="planStartTime">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="form.planStartTime" suffix-icon="el-icon-date" type="datetime" placeholder="请选择计划开始日期" :picker-options="pickerOptions" @change="onChangePlanStartTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划完成日期:" prop="planEndTime">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="form.planEndTime"  suffix-icon="el-icon-date" type="datetime" placeholder="请选择计划完成日期" :picker-options="pickerOptionsEnd" @change="onChangePlanEndTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划发货日期:" prop="shipDate">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="form.shipDate"  suffix-icon="el-icon-date" type="datetime" placeholder="请选择发货日期" :picker-options="pickerOptions" @change="onChangeShipDate">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="码格式:" prop="codeFormat">
              <el-select v-model="form.codeFormat" style="width:100%;" disabled>
                <el-option
                  v-for="i in codeFormatList"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="大码规格:" prop="largeSizeSpecifications">
              <el-input v-model="form.largeSizeSpecifications" placeholder="大码规格" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
           <el-col :span="24">
              <el-form-item label="备注:" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
              </el-form-item>
           </el-col>
        </el-row>
        <el-row>
           <el-col :span="24">
            <el-form-item>
              <el-radio-group v-model="form.produceType">
                <el-radio label="1">超量生产</el-radio>
                <el-radio label="0">标准生产</el-radio>
              </el-radio-group>
             </el-form-item>
           </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 弹出数据 -->
    <el-dialog title="产品" :visible.sync="open" width="70%" top="50px" append-to-body center :before-close="handleClose">
      <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
        <el-form-item label="产品名称" prop="searchValue">
          <el-input
            v-model="queryParams.searchValue"
            placeholder="请输入名称或编码检索"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="list-search">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="dataList" @row-click="onSelectData" :default-sort="{prop: 'date', order: 'descending'}" border>
        <el-table-column label="序号" type="index" align="center" width="50">
           <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="产品编码" align="center" prop="productCode" :show-overflow-tooltip="true" sortable />
        <el-table-column label="产品名称" align="center" prop="productName" :show-overflow-tooltip="true" />
        <el-table-column label="产品分类" align="center" prop="productClassificationName" :show-overflow-tooltip="true" />
        <el-table-column label="产品注册证号" align="center" prop="registrationNumber" :show-overflow-tooltip="true" />
        <el-table-column label="单位" align="center" prop="unit" :show-overflow-tooltip="true" />
        <el-table-column label="状态" align="center" prop="productStatus">
          <template slot-scope="scope">
            <div v-if="scope.row.productStatus == 0" style="color:#13C2C2">禁用</div>
            <div v-if="scope.row.productStatus == 1" style="color:#52C41A">正常</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getProduct"
      />
    </el-dialog>
    <el-dialog title="规格" :visible.sync="openPro" width="70%" top="50px" append-to-body center :before-close="handleClosePro">
      <el-form :model="queryParamsPro" ref="queryFormPro" :inline="true" @submit.native.prevent>
        <el-form-item label="搜索" prop="searchValue">
          <el-input
            v-model="queryParamsPro.searchValue"
            placeholder="请输入信息检索"
            clearable
            size="small"
            @keyup.enter.native="handleQueryPro"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryPro" class="list-search btn-success" color="#5ED4D4">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryPro" class="list-search">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="productNameList" @row-click="onProductName" border>
        <el-table-column label="序号" type="index" align="center" width="50" />
        <el-table-column label="规格名称" align="center" prop="specificationName" :show-overflow-tooltip="true" />
        <el-table-column label="规格" align="center" prop="specification" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ scope.row.value1 + scope.row.value2 }}
          </template>
        </el-table-column>
        <el-table-column label="箱规" align="center" prop="standardBoxGauge" :show-overflow-tooltip="true" />
        <el-table-column label="产品标识" align="center" prop="productIdentification" :show-overflow-tooltip="true" />
        <el-table-column label="大码规格" align="center" prop="largeSizeSpecifications" :show-overflow-tooltip="true" />
        <el-table-column label="大码标识" align="center" prop="largeSizeIdentification" :show-overflow-tooltip="true" />
      </el-table>
      <pagination
        v-show="totalPro > 0"
        :total="totalPro"
        :page.sync="queryParamsPro.pageNum"
        :limit.sync="queryParamsPro.pageSize"
        @pagination="handleQueryPro"
      />
    </el-dialog>
  </div>
</template>

<script>
import { planDetail, planEdit, getProductList, getSpecifications } from "@/api/system/plan/plan";
export default {
  name: "planEdit",
  data() {
    return {
      // 表单参数
      form: {
        productBasicId: '', // 产品id
        productBasicName: '', // 产品名称
        productId: '', // 规格id
        productName: '',// 规格名称
        productSpace: '', // 箱规
        specification: '', // 规格
        registrationNumber: '', // 产品注册证号
        productionSerialNumber: '', // 生产序列号
        largeSizeSpecifications: '', // 大码规格
        largeSizeIdentification: '', // 大码标识
        shipDate: '',
        planStartTime: '',
        planEndTime:'',
        remark: '',
        produceType: 0,
        codeFormat: '',
      },
      // 表单校验
      rules: {
        productBasicName: [
          { required: true, message: "产品名称不能为空"}
        ],
        productName: [
          { required: true, message: "规格名称不能为空"}
        ],
        batchNumber: [
          { required: true, message: "产品批号不能为空", trigger: "blur" }
        ],
        productSpace: [
          { required: true, message: "箱规不能为空", trigger: "blur" }
        ],
        planNum: [
          { required: true, message: "计划数量不能为空", trigger: "blur" }
        ],
        planStartTime: [
          { required: true, message: "计划开始日期不能为空", trigger: "blur" }
        ],
        planEndTime: [
          { required: true, message: "计划完成日期不能为空", trigger: "blur" }
        ]
      },
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        // }
      },
      pickerOptionsEnd: {
        // disabledDate(time) {
        //   return time.getTime() < Date.now()
        // }
      },
      // 单据id
      id: '',
      open: false,
      loading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        searchValue: undefined,
        productProperties: 2
      },
      // 弹出数据列表
      dataList: [],
      productNameList: '',
      codeFormatList:[
        {
          value:'1',
          label:'一物一码'
        },
        {
          value:'2',
          label:'UDI码'
        }
      ],
      productCode: '',
      openPro: false,
      totalPro: 0,
      queryParamsPro: {
        pageNum: 1,
        pageSize: 10,
        searchValue: undefined,
        productBasicCode: undefined
      },
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    onChangePlanStartTime(e){
      var date = new Date(e)
      this.planStartTime = date.getTime()
      if(this.form.planEndTime != null){
        if(this.planStartTime >= new Date(this.form.planEndTime).getTime()){
          this.form.planStartTime = ''
          this.planStartTime = ''
          this.$modal.msgError('计划开始日期不能大于计划完成日期！')
        }
      }else{
        if(this.planEndTime == undefined || this.planEndTime == ''){
        // console.log('111')
        }else{
          if(this.planStartTime >= this.planEndTime){
            this.form.planStartTime = ''
            this.planStartTime = ''
            this.$modal.msgError('计划开始日期不能大于计划完成日期！')
          }
        }
      }
    },
    onChangePlanEndTime(e){
      var date = new Date(e)
      this.planEndTime = date.getTime()
      if(this.form.planEndTime != null){
        if(this.planEndTime > new Date(this.form.planStartTime).getTime()){
          if(this.form.shipDate == null){
            // console.log('111')
          }else{
            if(this.planEndTime < new Date(this.form.shipDate).getTime()){
              // console.log('222')
            }else{
              this.form.planEndTime = ''
              this.planEndTime = ''
              this.$modal.msgError('计划完成日期不能大于发货日期！')
            }
          }
        }else{
          this.form.planEndTime = ''
          this.planEndTime = ''
          this.$modal.msgError('计划完成日期不能小于计划开始日期！')
        }
      }else{
        if(this.planStartTime > 0){
          if(this.planEndTime > this.planStartTime){
            if(this.shipDate == undefined || this.shipDate == ''){
              // console.log('111')
            }else{
              if(this.planEndTime < this.shipDate){
                // console.log('222')
              }else{
                this.form.planEndTime = ''
                this.planEndTime = ''
                this.$modal.msgError('计划完成日期不能大于发货日期！')
              }
            }
          }else{
            this.form.planEndTime = ''
            this.planEndTime = ''
            this.$modal.msgError('计划完成日期不能小于计划开始日期！')
          }
        }else{
          this.form.planEndTime = ''
          this.planEndTime = ''
          this.$modal.msgError('计划开始日期不能为空！')
        }
      }
    },
    onChangeShipDate(e){
      console.log(this.form.planEndTime)
      var date = new Date(e)
      this.shipDate = date.getTime()
      if(this.form.planEndTime != null){
        if(this.shipDate > new Date(this.form.planEndTime).getTime()){
          // console.log('111')
        }else{
          this.form.shipDate = ''
          this.shipDate = ''
          this.$modal.msgError('发货日期必须大于计划完成日期！')
        }
      }else{
        if(this.planEndTime > 0){
          if(this.shipDate > this.planEndTime || this.planEndTime == ''){
            // console.log('111')
          }else{
            this.form.shipDate = ''
            this.shipDate = ''
            this.$modal.msgError('发货日期必须大于计划完成日期！')
          }
        }else{
          this.form.shipDate = ''
          this.shipDate = ''
          this.$modal.msgError('计划完成日期不能为空！')
        }
      }

    },
    // 获取详细信息
    getDetailData() {
        planDetail(this.id).then(res => {
            if(res.code == 200){
                this.form = res.data
            }
        })
    },
    productShow(){
      this.open = true
      this.getProduct()
    },
    //请求产品列表
    getProduct(){
      this.loading = true
      getProductList(this.addDateRange(this.queryParams)).then(res => {
        this.dataList = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    // 删除产品
    productClear(){
      this.form.productBasicId = ''
      this.form.productBasicName = ''
      this.form.productId = ''
      this.form.productName = ''
      this.form.productSpace = ''
      this.form.specification = ''
      this.form.registrationNumber = ''
      this.form.largeSizeSpecifications = ''
      this.form.largeSizeIdentification = ''
      this.form.codeFormat = ''
    },
    // 搜索按钮
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getProduct()
    },
    // 重置按钮
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 选中产品
    onSelectData(row){
      this.form.productBasicId = row.id
      this.form.productBasicName = row.productName
      this.form.registrationNumber = row.registrationNumber
      this.form.productId = ''
      this.productCode = row.productCode
      this.form.productName = ''
      this.form.productSpace = ''
      this.form.specification = ''
      this.form.codeFormat = ''
      this.form.largeSizeSpecifications = ''
      this.form.largeSizeIdentification = ''
      this.open = false
      this.queryParams.searchValue = ''
      getSpecifications({productBasicCode: row.productCode}).then(res => {
        this.productNameList = res.rows
      })
    },
    // 关闭弹窗
    handleClose(){
      this.open = false
      this.queryParams.searchValue = undefined
    },
     productNameShow(){
      this.openPro = true
      this.queryParamsPro.searchValue = undefined
    },
    handleQueryPro() {
      this.queryParamsPro.productBasicCode = this.productCode
      getSpecifications(this.queryParamsPro).then(res => {
        this.productNameList = res.rows
        this.totalPro = res.total
      })
    },
    resetQueryPro() {
      this.queryParamsPro.searchValue = undefined
      this.queryParamsPro.pageNum = 1
      this.handleQueryPro()
    },
    // 选中规格
    onProductName(val){
      this.openPro = false
      this.form.productId = val.productSpecificationsId
      this.form.productName = val.specificationName
      this.form.productSpace = val.standardBoxGauge
      this.form.specification = val.value1 == null ? '' : val.value1 + val.value2
      this.form.largeSizeSpecifications = val.largeSizeSpecifications
      this.form.largeSizeIdentification = val.largeSizeIdentification
      if(val.productIdentification){
        this.form.codeFormat = '2'
      }else{
        this.form.codeFormat = '1'
      }
      this.queryParamsPro.searchValue = undefined
      this.handleQueryPro()
    },
    // 删除规格
    productNameClear(){
      this.form.productId = ''
      this.form.productName = ''
      this.form.productSpace = ''
      this.form.specification = ''
      this.form.registrationNumber = ''
      this.form.codeFormat = ''
      this.form.largeSizeSpecifications = ''
      this.form.largeSizeIdentification = ''
    },
    // 关闭规格弹窗
    handleClosePro(){
      this.openPro = false
      this.queryParamsPro.searchValue = undefined
      this.handleQueryPro()
    },
    /** 提交按钮 */
    submitForm(e) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(e == 1){
            this.$modal.loading("正在保存")
            let arr = this.form
            arr.plunStatus = 3
            arr.approveStatus = 4
            planEdit(this.form).then(res => {
              if(res.code == 200){
                this.$modal.closeLoading()
                this.$modal.msgSuccess("保存成功")
              }
            })
          }else{
            if(this.form.planNum <= 0){
              this.$modal.msgError('计划数量必须大于0！')
            }else if(/^[1-9]\d*$|^0$/.test(this.form.planNum) == false){
              this.$modal.msgError('计划数量必须是数字！')
              return false
            }else{
              this.$modal.loading("正在提交")
              let arr = this.form
              arr.plunStatus = 0
              arr.approveStatus = 0
              planEdit(arr).then(res => {
                if(res.code == 200){
                  this.$modal.closeLoading()
                  this.$tab.closeOpenPage({ path: "/production/plan/list", query:{id: this.id} })
                  this.$modal.msgSuccess("编辑成功!")
                }
              })
            }
          }
        }
      })
    }
  }
};
</script>

<style scoped>
  .icon-image{
    position:absolute;
    top:8px;
    right:10px;
    width:20px;
    height:20px;
  }
  .options {
    position: absolute;
    z-index:10;
    left:0;
    right:0;
  }
  .options li {
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-top: 0px;
    text-indent: 12px;
    overflow: hidden;
  }
  .options li:hover {
    background: #f3f5f9;
    color: #000;
  }
  .options-head {
    border: 1px solid #ccc;
    background: #f3f5f9;
  }
  .options-item{
    background:#fff;
    overflow-y:scroll;
    height: 384px;
  }
  .all-shop {
    line-height: 50px;
    margin-left: 12px;
  }
  .el-date-editor.el-input{
    width: 100%;
  }
</style>
